import {
    useState,
    useCallback,
    useEffect,
    useMemo
} from 'react';

import Child1 from "./child1";
import Child2 from "./child2";

const UseMemoUseCallback = ()=>{
    const [arr,setArr] = useState([])
    let [num,setNum] = useState(0);

    const handleClick = ()=>{
        setNum(num+1);
    }

    const fn = useCallback(()=>{
        console.log("asd")
    },[])

    const getArr = ()=> new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve([4153,456,789,7,5432,123,465,789,789,541,313,456])
        },1000)
    })

    useEffect(()=>{
        console.log("执行")
        getArr().then(e=>{
            //正常的逻辑 可以在 setArr包装
            //假如说，我们的数据在子组件钟会被修改，而且是多个子组件协同修改 性能就会非常的差
            setArr(e);
        })
    },[])

    const newArr = useMemo(()=>{
        return arr.filter((item)=>{
            console.log("我执行了")
            return item %2 === 0;
        })
    },[arr])

    return (
        <div>
            {num}
            <hr/>
            <button onClick={handleClick}>点我</button>
            <hr/>
            <Child1 fn={fn} />
            <hr/>
            <Child2 arr={newArr} />
        </div>
    )

}


export default UseMemoUseCallback;